<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <div slot="common-search">
            <div class="common-btn greyBasic">
                增加点差举例说明：<br> 假设某股票1周的权利金比例为5%，增加点差为“*4%”，则您增加的点差为5%*4%=0.2%
                <br> 此时，您的用户交易的实际权利金为5.2%
            </div>

        </div>
        <div slot="common-body">
            <p>个股期权点差管理
                <el-button size="mini" type="primary" v-if="disabled" @click="disabled=false">编辑</el-button>
                <el-button size="mini" type="primary" v-else @click="saveSpread">保存</el-button>
            </p>

            <table class="spread_manage-table tc">
                <thead>
                    <tr>
                        <td>合约期限</td>
                        <td>增加点差</td>
                    </tr>
                </thead>
                <template v-for="(item,index) of tableData">
                    <tr :key="index">
                        <td>{{item.times}}</td>
                        <td>
                            <el-input v-model="item.increment_num" :disabled="disabled" placeholder="请输入数值" size="mini" width="20%"></el-input>
                        </td>
                    </tr>
                </template>
            </table>

        </div>

    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            disabled: true,
            tableData: [],


        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
        this.queryTableList();
    },
    methods: {
        //编辑
        async saveSpread() {

            let params = {};
            let obj = {}
            for (let item of this.tableData) {
                switch (item.cycle_name) {
                    case '1w':
                        obj['1w'] = item.increment_num
                        break;
                    case '2w':
                        obj['2w'] = item.increment_num
                        break;
                    case '1m':
                        obj['1m'] = item.increment_num
                        break;
                    case '2m':
                        obj['2m'] = item.increment_num
                        break;
                    case '3m':
                        obj['3m'] = item.increment_num
                        break;
                    default:
                        break;
                }
                params = Object.assign(...params, obj)
            }
            let res = await service.haiheiUpdateIncrementInfoServer(params);
            if (res.success) {
                this.disabled = true;
            }
        },
        //查询列表
        async  queryTableList() {
            let res = await service.haiheiQueryIncrementInfoServer();
            if (res.success) {
                let result = res.result;
                for (let item of result) {
                    let str = '';
                    switch (item.cycle_name) {
                        case '1w':
                            str = '1周';
                            break;
                        case '2w':
                            str = '2周';
                            break;
                        case '1m':
                            str = '1月';
                            break;
                        case '2m':
                            str = '2月';
                            break;
                        case '3m':
                            str = '2月';
                            break;
                        default:
                            break;
                    }
                    item.times = str;
                }
                this.tableData = result;
            }
        },
        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },

    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
.spread_manage-table {
  width: 50%;
  margin-top: 20px;
}
.spread_manage-table td {
  padding: 10px;
  border: 1px solid #f3f3f3;
}
</style>